<template>
  <div class="SpareParts" ref="SpareParts">
    <div class="tab_box" v-if="partsList.length !== 0">
      <div class="title">零件信息</div>
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        class="SpareParts_my_tabs"
      >
        <el-tab-pane
          :label="item.partName"
          :name="item.id"
          v-for="item in partsList"
          :key="item.id"
        ></el-tab-pane>
        <!-- <el-tab-pane label="零件6" name="fourth3"></el-tab-pane> -->
      </el-tabs>
    </div>
    <div style="padding: 0 15px">
      <div class="details2_box">
        <el-table
          height="100px"
          v-adaptive="{ bottomOffset: 30 }"
          :row-class-name="tableRowClassName"
          :data="partsItem"
          style="width: 100%"
          :header-cell-class-name="headerRowStyle"
        >
          <el-table-column prop="date" label="序号" type="index" width="100">
          </el-table-column>
          <el-table-column prop="label" label="名称"> </el-table-column>

          <el-table-column prop="val" label="内容"> </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      activeName: "",
      partsItem: [],
    };
  },
  watch: {
    partsList(val) {
      if (val.length !== 0) {
        this.activeName = val[0].id;
        this.handleClick();
      }
    },
  },
  computed: {
    ...mapGetters(["partsList"]),
  },
  mounted() {
    // for (let index = 0; index < 20; index++) {
    //   this.tableData.push(this.tableData[0]);
    // }
    if (this.partsList.length !== 0) {
      this.activeName = this.partsList[0].id;
      this.handleClick();
    }
  },
  methods: {
    headerRowStyle() {
      return "success-row";
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    handleClick(val) {
      const row = this.$store.getters["application/getPartsDets"](
        this.activeName
      );
      console.log("row :>> ", row);
      this.partsItem = [
        {
          label: "零件号", //零件名称
          val: row.partNumber || "0001", //零件号
        },
        {
          val: row.processNumber || "5", //工序号
          label: "工序号" || "5", //零件名称
        },
        {
          val: row.toolingNumber || "5", //工序号
          label: "工装号", //零件名称
        },
      ];
    },
  },
};
</script>

<style lang='scss' scoped>
.SpareParts {
  border: 1px solid #0da9f2;
  background-color: #081f63;
  height: 43%;
  padding-top: 0;
  overflow: hidden;
  padding-bottom: 80px;
  .icons {
    display: flex;
    align-items: center;
    .line {
      background-color: #143e94;
      height: 16px;
      width: 1px;
      margin: 0 10px;
    }
  }
  .tab_box {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    background-color: #010b47;
    padding: 0 15px;
    margin-bottom: 10px;
    .title {
      font-size: 16px;
      margin-right: 30px;
    }
    .SpareParts_my_tabs {
      /* width: 300px; */
      width: 66%;
      /deep/ .el-tabs__nav-wrap::after {
        background-color: inherit;
      }
      /deep/ .el-tabs__header {
        margin: 0;
      }
      /deep/ .el-tabs__item {
        /* height: 24px; */
        /* line-height: 22px; */
        color: #fff;
      }
      /deep/ .el-tabs__item.is-active {
        color: #5dcbff !important;
      }
    }
  }
  /deep/ .gutter {
    display: none;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: inherit !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #5dcbff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /* ::-webkit-scrollbar {
    width: 12px !important;
    height: 12px;
  } */
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-corner {
    /* background-color: #5dcbff; */
    display: none !important;
  }
  .details2_box {
    background-color: #093085 !important;
    /* padding: 20px; */
    overflow: auto;
    /* height: 100%; */
    margin-top: 0px;
    /deep/ .el-table {
      background-color: #002675 !important;
      border: 1px solid #0da9f2;
      .has-gutter {
        th {
          padding: 6px 0;
        }
      }
      .el-table__row:hover > td {
        background-color: inherit !important;
      }
      td,
      th.is-leaf {
        border-bottom: 0 !important;
      }
      .el-table__row--striped:hover > td {
        background-color: inherit;
      }
      .warning-row {
        background: #093085 !important;
        color: #fff;
      }
      .success-row {
        background: #002675;
        color: #fff;
      }
    }
  }
}
</style>